<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
  <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
  <![endif]-->
  <link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:400,300" />
  <link rel="stylesheet" href="assets/css/ace.min.css" />
  <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        #score_style{
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed; /* 添加固定定位 */
            top: 50%; /* 从顶部50%位置开始 */
            left: 50%; /* 从左侧50%位置开始 */
            transform: translate(-50%, -50%); /* 使用transform将元素居中 */
        }
        #abnormal{
            width: 500px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed; /* 添加固定定位 */
            top: 50%; /* 从顶部50%位置开始 */
            left: 50%; /* 从左侧50%位置开始 */
            transform: translate(-50%, -50%);
            border: 1px solid #888;
        }
    </style>
<title>已加油订单</title> 
</head>
<body>
<div id="app">
<div class="page-content">
<!--待加油订单样式-->
<div class="d_Confirm_Order_style">
 <div class="row">
   <div class="col-xs-12">
	<h3 class="header smaller lighter blue">已加油订单</h3>
	<div class="table-header"></div>
    <div class="search_style">
      <div class="title_names">搜索查询</div>
      <ul class="search_content clearfix">
          <li><label class="lf">项目名称</label><input name="项目名称" type="text"  class="text_add" v-model="searchObj.project_name"/></li>
          <li><label class="lf">订单编号</label><input name="订单编号" type="text"  class="text_add" v-model="searchObj.o_number"/></li>
          <li><label class="lf">预计加油时间</label><input name="预计加油时间" class="inline laydate-icon" v-model="searchObj.prime_date" id="start" style=" margin-left:10px;"></li>
          <li style="width:90px;"><button  type="button" class="btn_search" @click="searchAll()">查询</button></li>
      </ul>
    </div>
	<div class="table-responsive">
	  <table id="sample-table-2" class="table table-striped table-bordered table-hover">
		<thead>
         <tr> 
		  <th width="60px">序列号</th>
		  <th>项目名称</th>
		  <th >订单编号</th>
          <th width="100px">实际加油时间</th>
		  <th >加油地点</th>
          <th width="80px">船名</th>
          <th width="90px">品种</th>
          <th width="70px">单价/元</th>
          <th width="80px">订单数量/吨</th>
		  <th width="100px">实际加油数量/吨</th>
          <th width="70px">小计/元</th>
          <th width="70px">总价/元</th>
          <th>供应商</th>
          <th>录入时间</th>
          <th width="90px">扫描件浏览</th>
          <!--该操作系统后台用户权限进行判断进行-->
          <th>操作</th>
          <!--结束-->
         </tr>
		</thead>
         <tbody>
         <tr v-for="i in zData">
             <td>{{i.o_id}}</td>
             <td>{{i.project_name}}</td>
             <td ><a href="#" class="Numbering">{{i.o_number}}</a></td>
             <td>{{i.prime_date}}</td>
             <td >{{i.place}}</td>
             <td style="border-right:0px;">{{i.boat_name}}</td>
             <td colspan="5" class="table_jiage">
                 <table width="100%" cellpadding="0" cellspacing="0" v-for="(j,index) in i.price">
                     <tbody><tr style=" border-bottom:1px solid #ddd">
                         <td >{{i.breed[index]}}</td><td >{{j}}</td><td >{{i.purchase_quantity[index]}}</td><td >{{i.purchase_quantity[index]}}</td>
                         <td >{{j*i.purchase_quantity[index]}}</td>
                     </tr>
                     </tbody>
                 </table>
             </td>
             <td>{{i.total}}</td>

             <td><a href="#" class="gys_xinxi">{{i.supplier}}</a></td>
           <td>{{i.date}}</td>
           <td><button type="button" class="btn btn-primary smj_btn">浏览</button></td>  
           <!--该操作系统后台用户权限进行判断进行-->
           <td><button type="button" class="btn btn-info score_btn" @click="score(i.o_id)">评分</button><button type="button" class="btn btn-warning abnormal_btn" @click="Yc(i.o_id)">异常</button></td>
           <!--结束-->    
          </tr>
      </tbody>
  </table>
        <div class="block">
            <span class="demonstration">完整功能</span>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 15, 20]"
                    :pageSize="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </div>

</div>
</div>
</div>
</div>
</div>
<!--扫描件浏览样式-->
<div class="Scan_style" id="Scan" style="display:none">
 <img src="images/1.jpg" />
</div>
<!--异常处理样式-->
<div class="abnormal_style" id="abnormal" :style="element">
   <ul class="add_reason">
    <li><label><span class="lbl">请具体描述您在加油时遇到的问题：</span></label></li>
    <li>原因说明：<textarea name="异常原因说明" cols="" rows="" id="textarea"  style="width:350px; height:150px;" v-model="info"></textarea></li>
   </ul>
    <div class="center"><button type="button" class="btn btn-primary btn_search" @click="evaluations()">提交</button>
        <button type="button" class="btn btn-primary btn_search" @click="cancels()">取消</button></div>
</div>
<!--评分样式-->

<div id="score_style" :style="elementStyle" >
<div class="page-content">
    <ul class="score_style">
        <li class="clearfix scores">
            <p style="font-size:20px" class="lf label_name">油品：</p>
            <div class="block">
                <span class="demonstration">区分颜色</span>
                <el-rate
                        v-model="oil"
                        :colors="colors">
                </el-rate>
            </div>
            <div id="result1" class="lf Rating"></div>
        </li>
        <li class="score_prompt">你对加油后油的质量的评价，这对日后选择供应商很重要。</li>
        <li class="clearfix scores">
            <p style="font-size:20px" class="lf label_name">服务：</p>
            <div class="block">
                <span class="demonstration">区分颜色</span>
                <el-rate
                        v-model="serve"
                        :colors="colors">
                </el-rate>
            </div>
            <div id="result2" class="lf Rating"></div>

        </li>
        <li class="score_prompt">你对在加油过程中对供应商的服务评价，这对日后选择供应商很重要</li>
        <li class="clearfix scores">
            <p style="font-size:20px" class="lf label_name">其他：</p>
            <div class="block">
                <span class="demonstration">区分颜色</span>
                <el-rate
                        v-model="other"
                        :colors="colors">
                </el-rate>
            </div>
            <div id="result3" class="lf Rating"></div>

        </li>
        <li class="score_prompt">你还对在加油过程中的其他服务评价，这对日后选择供应商很重要</li>
    </ul>
<div class="center"><button type="button" class="btn btn-primary" @click="evaluation()">确认评价</button>
    <button type="button" class="btn btn-primary" @click="cancel()">取消</button></div>
</div>
</div>
</div>
</div>
<!--END-->
<!--[if !IE]> -->
<script src="assets/js/jquery.min.js"></script>
<!-- <![endif]-->
<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
	if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="js/jquery.raty.js" type="text/javascript"></script>
<script src="assets/layer/layer.js" type="text/javascript" ></script>
<script src="assets/laydate/laydate.js" type="text/javascript"></script>
<script type="text/javascript">
 //弹出一个iframe层
$('.gys_xinxi').on('click', function(){
    layer.open({
        type: 2,
        title: '供应商信息',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['580px' , '400px'],
        content: '供应商信息.html'
    });
});
jQuery(document).ready(function(){ 
//评分样式
 rat('star1','result1',1);
rat('star2','result2',1);
rat('star3','result3',1);
function rat(star,result,m){

	star= '#' + star;
	result= '#' + result;
	$(result).show();//显示评分
	$(star).raty({
		hints: ['1','2', '3', '4', '5',],
		path: "images",
		starOff: 'star-off-big.png',
		starOn: 'star-on-big.png',
		size: 24,
		start: 40,
		showHalf: true,
		target: result,
		targetKeep : true,//targetKeep 属性设置为true，用户的选择值才会被保持在目标DIV中，否则只是鼠标悬停时有值，而鼠标离开后这个值就会消失
		//click: function (score, evt) {
//			//第一种方式：直接取值
//			 layer.alert('你的评分是'+score*m+'分',{
//               title: '提示框',				
//			   icon:0,					
//               }); 
//		}
		
	});

	/*第二种方式可以设置一个隐蔽的HTML元素来保存用户的选择值，然后可以在脚本里面通过jQuery选中这个元素来处理该值。 弹出结果*/
//'	  var text = $(result).text();
//'	  $('#score_btn').click(function () {
//'		  if ($(result).text() != text) {
//'			   layer.alert('你的评分是'+$(result).text()/m+'分',{
//'				 title: '提示框',				
//'				 icon:0,					
//'				 });
//'			  return;
//'			  layer.close(index);  
//'		  }
//'	}); 

}	//弹出一个评分界面
$('.score_btn').on('click', function(){
    layer.open({
        type: 1,
        title: '用户评价',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['450px' , '400px'],
        content:$('#score_style'),
		btn:['确认评分'],
		yes:function(index, layero){
			var count_1 =Number($("#result1").text()); 
            var count_2 =Number($("#result2").text());  
			var count_3 =Number($("#result3").text()); 
		    var count =parseFloat(count_1)+parseFloat(count_2)+parseFloat(count_3);  						
		   $(".Rating").each(function(n){
			if($(this).text()=="")
             {
			   layer.alert("评分不能为空！\r\n",{
               title: '提示框',				
			   icon:0,					
               }); 
			  return false;         
          }
		 else{			  
			 layer.alert('你的评分是'+(count/3).toFixed(1)+'分',{
               title: '提示框',				
			   icon:0,					
               }); 
			  layer.close(index);      
		  }	 	  	
	  }); 											   			  
	}			
    });	 
})	
});
$('.Numbering').on('click', function(){
    layer.open({
        type: 2,
        title: '订单信息',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['980px' , '400px'],
        content: '订单信息.html'
    });
});

laydate({
    elem: '#start',
    event: 'focus' 
});
$('.smj_btn').on('click', function(){
	 layer.open({
		 type: 1,
		 title: '扫描件浏览',
		 shadeClose: true,
		 area :['550px','100%'],
		 content: $('#Scan')
	  });
});
$('.abnormal_btn').on('click', function(){
	 layer.open({
		 type: 1,
		 title: '异常原因',
		 shadeClose: true,
		 area :['550px',''],
		 content: $('#abnormal'),
		 btn: ['修改','关闭'],
	    yes: function(index, layero){
		  var str="";			
		   $("#textarea").each(function(n){
			if($(this).val()=="")
             {
			   layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
               title: '提示框',				
			   icon:0,					
               }); 
        
          }
		 else{			  
			  layer.alert('修改成功！',{
               title: '提示框',				
			icon:1,		
			  }); 
			  layer.close(index);      
		  }	 	  	
	  }); 
     
     } 	
	  });
});
/***判断用户添加文本**/
 jQuery(document).ready(function(){  
 
  $(".btn_search").click(function(){
	// var num=0;
     var str="";
     $("#textarea").each(function(n){
          if($(this).val()=="")
          {
              // num++;
			   layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
                title: '提示框',				
				icon:0,				
          }); 
             // layer.msg(str+=""+$(this).attr("name")+"不能为空！\r\n");
             layer.close(index);
          }		  
     });    
});
 });
</script>
</script>

<script>
    new Vue({
        el:"#app",
        data:{
            //总数据
            zData:[],
            //公共对象
            comData:{
                o_id:0,
                project_name:"",
                o_number:"",
                prime_date:"",
                place:"",
                boat_name:"",
                supplier:"",
                date:"",
                breed:[],
                price: [],
                purchase_quantity:[],
                total:0
            },
            //搜索对象
            searchObj:{
                o_type:'已加油',
                project_name:'',
                o_number:'',
                prime_date:''
            },
            //当前页数
            page:1,
            //每页显示数
            pageSize:10,
            //总条目数
            total:0,
            //油品
            oil:0,
            //服务
            serve:0,
            //其他
            other:0,
            //异常评价
            info:"",
            //颜色
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            show:false,
            shows:false,
            //选中的id
            oid:0,
            //搜索状态
            searchStatus:false,
        },
        methods:{
            getInfo(){
                axios.get("orders/已加油/"+(this.page-1)*this.pageSize+"/"+this.pageSize+"/ordersType.do").then(dt => {
                    this.zData = [];
                    for (let i = 0; i < dt.data.length; i++) {
                        let comData = {
                            o_id: dt.data[i].o_id,
                            project_name: dt.data[i].project_name,
                            o_number: dt.data[i].o_number,
                            prime_date: dt.data[i].prime_date,
                            place: dt.data[i].place,
                            boat_name: dt.data[i].boat_name,
                            supplier: dt.data[i].supplier,
                            date: dt.data[i].date,
                            breed: dt.data[i].breed.split(","),
                            price: dt.data[i].price.split(","),
                            purchase_quantity: dt.data[i].purchase_quantity.split(","),
                            total: 0
                        };
                        for (let j = 0; j < comData.price.length; j++) {
                            comData.total += parseFloat(comData.price[j]) * parseFloat(comData.purchase_quantity[j]);
                        }
                        this.zData.push(comData);
                    }
                    console.log(this.zData);
                })
            },
            setType(type,oid) {
                axios.get("orders/" + type + "/" + oid + "/update.do").then(dt => {
                    if (dt.data) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        if (this.searchStatus) {
                            this.searchAll()
                        } else {
                            this.getInfo()
                            this.total--
                        }
                    } else {
                        this.$message({
                            type: 'info',
                            message: '修改失败'
                        });
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize=val
                this.getInfo()
            },
            handleCurrentChange(val) {
                this.page=val
                this.getInfo()
            },

            searchAll(){
                if (this.searchObj.project_name.trim() !== '' | this.searchObj.o_number.trim() !== '' || this.searchObj.prime_date.trim() !== '') {
                    axios.get("orders/searchAll.do", {
                        params: this.searchObj
                    })
                        .then(dt => {
                            this.zData = [];
                            for (let i = 0; i < dt.data.length; i++) {
                                let comData = {
                                    o_id: dt.data[i].o_id,
                                    project_name: dt.data[i].project_name,
                                    o_number: dt.data[i].o_number,
                                    prime_date: dt.data[i].prime_date,
                                    place: dt.data[i].place,
                                    boat_name: dt.data[i].boat_name,
                                    supplier: dt.data[i].supplier,
                                    date: dt.data[i].date,
                                    breed: dt.data[i].breed.split(","),
                                    price: dt.data[i].price.split(","),
                                    purchase_quantity: dt.data[i].purchase_quantity.split(","),
                                    total: 0
                                };
                                for (let j = 0; j < comData.price.length; j++) {
                                    comData.total += parseFloat(comData.price[j]) * parseFloat(comData.purchase_quantity[j]);
                                }
                                this.zData.push(comData);
                            }
                        })
                } else {
                    this.$message({
                        type: 'info',
                        message: '您还没有输入值'
                    });
                }
            },
            //评分
            score(i){
                this.show=true;
                this.oid=i;
            },
            //异常
            Yc(i){
                this.shows=true;
                this.oid=i;
            },
            //确认评价
            evaluation(){
                this.show=false;
                axios.get("orders/pf.do?o_id="+this.oid+"&oil="+this.oil+"&serve="+this.serve+"&other="+this.other)
                    .then(dt =>{
                        if(dt.data){
                            this.$message({
                                type: 'success',
                                message: '评分成功!'
                            });
                            if (this.searchStatus) {
                                this.searchAll()
                            } else {
                                this.getInfo()
                                this.total--
                            }
                        }else {
                            this.$message({
                                type: 'info',
                                message: '评分失败'
                            });
                        }
                    })
            },
            //取消
            cancel(){
                this.show=false
            },
            evaluations(){
                this.shows=false
                let encodedInfo = encodeURIComponent(JSON.stringify(this.info));
                axios.get("orders/yc.do?o_id="+this.oid+"&info="+encodedInfo).then(dt =>{
                    if(dt.data){
                        this.$message({
                            type: 'success',
                            message: '异常上报成功!'
                        });
                        if (this.searchStatus) {
                            this.searchAll()
                        } else {
                            this.getInfo()
                            this.total--
                        }
                    }else {
                        this.$message({
                            type: 'info',
                            message: '异常上报失败'
                        });
                    }
                })
            },
            cancels(){
                this.shows=false
            }

        },
        mounted(){
            axios.get("orders/已加油/total.do").then(dt =>{
                this.total=dt.data
            })
            this.getInfo();
        },
        computed: {
        elementStyle() {
            return {
                display: this.show ? 'block' : 'none'
            };
        },
            element(){
                return {
                    display: this.shows ? 'block' : 'none'
                };
            }
    },
    })
</script>
</body>
</html>
